<template>
    <div class="table">
        <div class="container">
            <div class="handle-box" style="text-align: right">
                <el-select v-model="roleId0" placeholder="请选择" @change="select0" style="width: 200px;margin-bottom: 1rem;">
                    <el-option v-for="(item,index) of pList" :key="index" :label="item.name+'('+item.create_time+')'" :value="item.id"></el-option>
                </el-select>
                <!--<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>-->
                <!--<el-button type="primary" icon="search" @click="search">搜索</el-button>-->
                <a download="true" class="el-button el-button--primary el-button--small" :href="exportUrl">错题导出</a>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="content" label="题库名称"></el-table-column>
                <el-table-column prop="right_answer" sortable label="正确答案"></el-table-column>
                <el-table-column label="考生答案">
                    <template slot-scope="scope">
                        <span>{{scope.row.answer_time?scope.row.user_answer:'未作答'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否正确">
                    <template slot-scope="scope">
                        <span :class="{'red': scope.row.is_right!='2'}">{{scope.row.is_right=='2'?'正确':'错误'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="answer_time" label="答题时间"></el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalRow">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

        <!-- 二维码弹出框 -->
        <el-dialog title="考试二维码" :visible.sync="qrCodeShow" width="30%">
            <div style="text-align: center;">
                <div id="qrcodeBox" style="display: inline-block;"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // import URL from '../../utils/baseUrl'
    export default {
        components:{
        },
        name: 'paper',
        data() {
            return {
                roleId0: '',
                tableData: [],
                pageSize: 0,
                totalRow: 0,
                currentPage: 1,
                pList: [],
                editVisible: false,

                roleId: '',

                qrCodeShow: false,  // 显示二维码
                qrCodeImg: '',

                exportUrl: '',
            }
        },
        props: ['uid'],
        computed: {
            data() {
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 改变pageSize
            handleSizeChange(){},
            // 分页导航
            handleCurrentChange(val) {
                this.getData(val);
            },
            // 获取列表数据
            getData(pageNumber) {
                this.loadopen();
                this.config.post('/admin/testPaper/findErrorBen', {
                    pageNum: pageNumber?pageNumber:1,
                    userId: this.uid,
                    modeId: this.roleId0,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.pageNumber = res.data.page.pageNumber;

                        this.exportUrl = URL + '/admin/testPaper/exportfindErrorBen?userId='+this.uid+'&modeId='+this.roleId0;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            getPaperList(){
                this.loadopen();
                this.config.post('/admin/testPaper/findModeList', {
                    userId: this.uid,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.pList = res.data.examinationModeList;
                        this.roleId0 = '';
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            search() {
            },
            select0(id){
                this.roleId0 = id;
                this.getData(1);
            },
        },
        mounted(){
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
